<template>
  <div class="app">
      <Header class="header"></Header> 
      <!-- 路由组件出口地方 -->
      <router-view class="main"></router-view>
      <Footer class="footer" v-show="$route.meta.isShowFooter"></Footer>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  name: 'app',
  components: { Header, Footer },
  mounted() {
    /* 激发store中的action，获取三级列表数据数据，
    不放在TypeNav放app里的优点：跳转路由时不会销毁再创建，
    缺点：数据只在最开始获取一次，如数据变化，页面数据没有实时更新 */
    this.$store.dispatch('categoryList');
  },
  methods: {

  }
}
</script>
<style lang="less">
.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .header {
    flex: 0;
  }

  .main {
    flex: 1;
    
  }

  .footer {
    flex: 0;
  }
}

</style>

